<template>
  <div>
    <v-header>
      <v-back></v-back>
    </v-header>

    <!-- 订单号 -->
    <div class="price">
      <p>订单号{{array.listCode}}</p>
      <p>￥{{array.money}}</p>
    </div>
    <!-- 支付方式 -->
    <div class="pay">
      <div>请选择支付方式</div>
      <div>
        <span><img src="./img/支付宝.jpg" alt="图1" /></span>
        <span> 支付宝支付</span>
        <span> <input type="radio" name="pay" checked/> </span>
      </div>
      <div>
        <span><img src="./img/微信.jpg" alt="图2" /></span>
        <span> 微信支付</span>
        <span> <input type="radio"  name="pay"/> </span>
      </div>
    </div>
    <div class="footer">确认支付</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      array:{}
    }
  },
  created(){
    this.array.money = this.$route.query.money;
    this.array.listCode = this.$route.query.listCode;
  }
};
</script>
<style lang="less" scoped>
.footer {
  width: 80vw;
  height: 0.4rem;
  background-color: #1ebbef;
  position: fixed;
  bottom: 0.1rem;
  left: 10vw;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 0.4rem;
  color: white;
}
.price {
  padding: 0.2rem;
  width: 100vw;
  height: 0.5rem;
  box-sizing: border-box;
  text-align: center;
  p {
    margin-top: 0.1rem;
    &:nth-child(1) {
      color: #666;
    }
    &:nth-child(2) {
      margin-top: 0.2rem;
      font-size: 0.35rem;
    }
  }
}
// 支付方式
.pay {
  margin-top: 1rem;
  width: 100vw;
  height: 1rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  div {
    &:nth-child(1) {
        font-weight: 600;
        font-size: .14rem;
    }
    &:nth-child(2),&:nth-child(3) {
        margin-top: .2rem;
       span{
           &:nth-child(1){
               width: .2rem;
               height: .2rem;
               img{
                   width: .2rem;
                   height: .2rem;
                   vertical-align: middle;
               }
           }
           &:nth-child(2){
               margin-left: .2rem;
               font-size: .14rem;
               font-weight: 600;

           }
           &:nth-child(3){
              float: right;
           }
           
       }
    }
  }
}
</style>